<template>
  <div class="homeCenter">
      <ul class="sidebar">
        <li v-for="item in list" :key="item.url" class="menu_item">
          <router-link
            :to="item.url"
            :target="item.target ? '_blank' : ''"
            tag="a"
          >
            <img
              class="menu_icon"
              :src="
                item.url.slice(0, 3) == $route.path.slice(0, 3)
                  ? item.img2
                  : item.img1
              "
              alt
            />
            <div class="menuTitle">{{ item.name }}</div>
          </router-link>
        </li>
      </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: this.$i18n.t("m.Account"),
          url: "/accountCenter",
          img1: require("../../assets/img/icon_zhh.png"),
          img2: require("../../assets/img/icon_zhl.png"),
        },
        {
          name: this.$i18n.t("m.quotation"),
          url: "/quotationCenter",
          img1: require("../../assets/img/icon_hqh.png"),
          img2: require("../../assets/img/icon_hql.png"),
        },
        {
          name: this.$t("views.Home.56hpa36w8340"),
          url: "/optional",
          img1: require("../../assets/img/zxhs.png"),
          img2: require("../../assets/img/zxls.png"),
        },
        {
          name: this.$i18n.t("m.hkStock"),
          url: "/hk_Market",
          img1: require("../../assets/img/icon_ggh.png"),
          img2: require("../../assets/img/icon_ggl.png"),
        },
        {
          name: this.$i18n.t("m.usStock"),
          url: "/us_Market",
          img1: require("../../assets/img/icon_mgh.png"),
          img2: require("../../assets/img/icon_mgl.png"),
        },
        {
          name: this.$i18n.t("m.cnStock"),
          url: "/sh_Market",
          img1: require("../../assets/img/icon_hsh.png"),
          img2: require("../../assets/img/icon_hsl.png"),
        },
      ],
    };
  },
};
</script>

<style lang="less">
.homeCenter {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  box-sizing: border-box;
  border-bottom: 2px solid @DarkBorderLine;
  overflow: auto;
  .sidebar {
    box-sizing: border-box;
    width: 60px;
    border-right: 2px solid @DarkBorderLine;
    background: @sideColor;
    height: 100%;
    padding-top: 60px;
      .menu_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 0;
        width: 100%;
        text-align: center;
        .menuTitle {
          color: @fbSix;
          font-size: 12px;
          line-height: 24px;
        }
        .menu_icon {
          height: 30px;
        }
      }
  }
}
</style>